<template>
	<view>
		<u-sticky>
			<view class="header">
				<u-search
					placeholder="请输入店铺关键字"
					v-model="keyword"
					shape="square"
					:showAction="false"
					@search="searchlist"
				></u-search>
			</view>
			<view class="tags"><u-tabs :list="list1" @click="click" width="300rpx"></u-tabs></view>
		</u-sticky>
		<view class="content">
			<view class="list" v-for="item in businessList">
				<view class="box" @tap="updata(item)">
					<view class="top" style="">
						<view class="box-two">
							<image
								style="width: 150rpx; height: 150rpx"
								:src="item.jsonViewData.businessLogo"
								mode=""
							></image>
						</view>
						<view class="box-three">
							<view class="one">{{ item.jsonViewData.businessName }}</view>

							<view class="two">
								{{ item.jsonViewData.businessHours[0].businessStartTime }}--{{
									item.jsonViewData.businessHours[0].businessEndTime
								}}
							</view>
							<view class="three">{{ item.jsonViewData.businessMobile }}</view>
						</view>
					</view>
					<view class="bottom">
						{{ item.jsonViewData.businessAddress.address }}
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="show" :title="title" :showCancelButton="true" @confirm="confirm" @cancel="show = false">
			<view class="">
				<u--form
					style="flex-direction: column"
					labelPosition="left"
					:model="form"
					:rules="rules"
					ref="uForm"
					labelWidth="80"
				>
					<u-form-item label="门店名称" prop="goodsName" borderBottom ref="item1">
						<u--input v-model="form.businessName" border="none" placeholder="请输入"></u--input>
					</u-form-item>
					<u-form-item label="门店电话" prop="goodsName" borderBottom ref="item1">
						<u--input v-model="form.businessMobile" border="none" placeholder="请输入"></u--input>
					</u-form-item>
					<u-form-item label="营业时间" prop="goodsName" borderBottom ref="item1">
						<view class="" style="display: flex; align-items: center">
							<view class="" @click="change(1)">{{ form.businessHours[0].businessStartTime }} ~</view>
							<view class="" @click="change(2)">
								{{ form.businessHours[0].businessEndTime }}
							</view>
						</view>
					</u-form-item>
					<u-datetime-picker
						:show="show1"
						v-model="value1"
						mode="time"
						@confirm="queding()"
						@cancel="show1 = false"
					></u-datetime-picker>
					<u-form-item label="门店地址" prop="goodsName" borderBottom ref="item1" @click="getMapLocation">
						<u--input
							v-model="form.businessAddress.address"
							border="none"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择"
						></u--input>
					</u-form-item>
					<u-form-item label="详细地址" prop="goodsName" borderBottom ref="item1">
						<u--input v-model="form.businessAddress.inDetail" border="none" placeholder="请输入"></u--input>
					</u-form-item>
					<u-form-item label="门店Logo" prop="goodsName" borderBottom ref="item1">
						<view
							class=""
							style="
								display: flex;
								align-items: center;
								justify-content: space-between;
								margin-top: 20rpx;
							"
						>
							<view class="">
								<view class="" style="display: flex; flex-wrap: wrap">
									<image
										v-if="form.businessLogo"
										style="width: 100rpx; height: 100rpx; margin-bottom: 20rpx; margin-right: 10rpx"
										:src="form.businessLogo"
										@click="del(index)"
									></image>
									<view
										v-else
										@tap="changeImage()"
										style="
											width: 100rpx;
											height: 100rpx;
											background-color: #f5f5f5;
											display: flex;
											justify-content: center;
											align-content: center;
											margin-bottom: 10rpx;
										"
									>
										<u-icon name="photo" size="50"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</u-form-item>
				</u--form>
			</view>
		</u-modal>
		<view class="footer"><view @click="open()" class="left">添加门店</view></view>
	</view>
</template>

<script>
import {
	searchPlugsDataList,
	searchPlugsDataById,
	insertPlugsData,
	updatePlugsData,
	uploadImages
} from '../../utils/api.js';
export default {
	data() {
		return {
			keyword: '',
			show: false,
			list1: [
				{
					id: -1,
					name: '全部'
				},
				{
					id: 0,
					name: '营业中'
				},
				{
					id: 1,
					name: '休息中'
				}
			],

			businessList: [],
			show1: false,
			value1: '',
			num: 1,
			region: ['浙江省', '杭州市', '余杭区'],
			search: {
				page: 1,
				size: 10
			},

			goodsCategoryId: -1,
			title: '新增门店信息',
			rules: {},
			info: {
				id: '',
				adminId: uni.getStorageSync('userInfo').id,
				userServiceToken: uni.getStorageSync('userInfo').userServiceToken,
				configType: '',
				jsonViewData: {},
				jsonData: {},
				plugsId: 135,
				businessId: '',
				userId: 0
			},
			form: {
				businessMobile: '',
				config_type: 'business_config',
				businessId: '',
				businessName: '',
				businessLogo: '',
				businessHours: [
					{
						businessStartTime: '08:00',
						businessEndTime: '20:00'
					}
				],
				businessStatus: false,
				shareImages: '',
				shopExpressFee: {
					allShopExpressFee: 0,
					freeShipping: 0,
					packingFee: 0
				},
				payType: {
					cashDelivery: false,
					wxPay: false,
					balance: false,
					integral: false
				},
				shareTitle: '',
				refundInfo: {
					applyRefundDay: 30,
					refundReview: false
				},
				businessAddress: {
					address: '',
					province: '浙江',
					city: '',
					district: '余杭区',
					latitude: 0,
					longitude: 0
				},
				logisticsType: {
					oneselfDelivery: false,
					expressDelivery: false,
					noDelivery: false
				},
				automaticReceiptDay: 7
			},
			total: 0
		};
	},
	onShow() {
		this.getBusinessList();
		let that = this;
		uni.$once('changeList', function (data) {
			console.log(data, 9966);
			if (data.length > 0) {
				that.form.businessLogo = data[0];
			}
		});
	},
	onReachBottom() {
		if (this.businessList.length < this.total) {
			this.search.page++;
			this.getBusinessList();
		}
	},
	methods: {
		click(item) {
			this.search.page = 1;
			this.businessList = [];
			this.getBusinessList();
		},
		open() {
			this.cancel();
			this.show = true;
			this.title = '添加门店';
		},
		checkboxChange(e) {
			console.log(e);
		},
		searchlist() {
			this.getBusinessList();
			this.keyword = '';
		},
		getBusinessList() {
			let data = {
				page: this.search.page,
				size: this.search.size,
				adminId: uni.getStorageSync('userInfo').id,
				userServiceToken: uni.getStorageSync('userInfo').userServiceToken,
				keyword: this.keyword,
				id: 135
			};
			searchPlugsDataList(data).then((res) => {
				if (res.code == 200) {
					if (this.search.page == 1) {
						this.businessList = [];
					}
					let arr = [];
					arr = this.businessList.concat(res.body.list);
					this.businessList = arr;
					this.total = res.body.total;
				}
			});
		},
		selectRegion(e) {
			this.region = e.detail.value;
			this.form.businessAddress.province = this.region[0];
			this.form.businessAddress.city = this.region[1];
			this.form.businessAddress.district = this.region[2];
		},
		updata(item) {
			this.title = '修改门店信息';
			let data = {
				id: item.id
			};
			searchPlugsDataById(data).then((res) => {
				if (res.code == 200) {
					this.info = res.body;
					this.form = this.info.jsonViewData;
					console.log(this.form, 99999999);
				}
			});
			this.show = true;
		},
		change(index) {
			this.num = index;
			this.show1 = true;
		},
		queding(e) {
			console.log(e);
			if (this.num == 1) {
				this.form.businessHours[0].businessStartTime = e.value;
			} else if (this.num == 2) {
				this.form.businessHours[0].businessEndTime = e.value;
			}
			this.show1 = false;
		},
		getMapLocation() {
			uni.chooseLocation({
				success: (res) => {
					console.log(res, 9999999);
					this.form.businessAddress.address = res.address;
					this.form.businessAddress.latitude = res.latitude;
					this.form.businessAddress.longitude = res.longitude;
				},
				fail: () => {}
			});
		},
		changeImage(index) {
			uni.navigateTo({
				url: '/pages/user/annex/annex?source=1'
			});
		},
		del(index) {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '您确定要删除此图片吗？',
				cancelText: '取消', // 取消按钮的文字
				confirmText: '确定', // 确认按钮文字
				showCancel: true, // 是否显示取消按钮，默认为 true
				// confirmColor: '#f55850',
				// cancelColor: '#39B54A',
				success: (res) => {
					if (res.confirm) {
						//点击了确定
						this.form.businessLogo = '';
						uni.showToast({
							icon: 'none',
							title: '删除成功'
						});
					} else {
						//点击了取消
					}
				}
			});
		},
		getTimestamp() {
			return new Date().getTime();
		},

		// 生成一个随机的工作机器 ID，实际应用中应该使用机器的真实标识符
		getWorkerID() {
			let code_fill_str = ['000000', '00000', '0000', '000', '00', '0', ''];
			let code = '' + parseInt((Math.random() * 1000000).toString());
			code = code_fill_str[code.length] + code;
			console.log(code);
			return code;
		},

		// 生成一个随机的序列号
		// function getSequence() {
		//   return Math.floor(Math.random() * 100000);
		// }
		// const sequence = getSequence();
		// 生成雪花 ID 的主函数
		generateSnowflakeID() {
			const timestamp = this.getTimestamp();
			const workerID = this.getWorkerID();

			// 将时间戳、工作机器 ID 和序列号组合在一起生成雪花 ID
			return `${timestamp}${workerID}`;
		},
		cancel() {
			(this.form = {
				businessMobile: '',
				config_type: 'business_config',
				businessId: '',
				businessName: '',
				businessLogo: '',
				businessHours: [
					{
						businessStartTime: '08:00',
						businessEndTime: '12:00'
					}
				],
				businessStatus: false,
				shareImages: '',
				shopExpressFee: {
					allShopExpressFee: 0,
					freeShipping: 0,
					packingFee: 0
				},
				payType: {
					cashDelivery: false,
					wxPay: false,
					balance: false,
					integral: false
				},
				shareTitle: '',
				refundInfo: {
					applyRefundDay: 30,
					refundReview: false
				},
				businessAddress: {
					address: '',
					province: '浙江',
					city: '',
					district: '余杭区',
					latitude: 0,
					longitude: 0
				},
				logisticsType: {
					oneselfDelivery: false,
					expressDelivery: false,
					noDelivery: false
				},
				automaticReceiptDay: 7
			}),
				(this.info = {
					id: '',
					adminId: uni.getStorageSync('userInfo').id,
					userServiceToken: uni.getStorageSync('userInfo').userServiceToken,
					configType: '',
					jsonViewData: {},
					jsonData: {},
					plugsId: 135,
					businessId: '',
					userId: 0
				});
		},
		confirm(e) {
			if (!this.info.id || this.info.id == '') {
				this.form.businessId = this.generateSnowflakeID();
				this.info.jsonData = JSON.stringify(this.form);
				insertPlugsData(this.info).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							title: '添加成功'
						});
						this.show = false;
						setTimeout(() => {
							this.getBusinessList();
							this.cancel();
						}, 500);
					}
				});
			} else {
				this.info.jsonData = JSON.stringify(this.form);
				updatePlugsData(this.info).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							title: '修改成功'
						});
						this.show = false;
						setTimeout(() => {
							this.getBusinessList();
							this.cancel();
						}, 500);
					}
				});
			}
		}
	}
};
</script>
<style lang="scss">
page {
	background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
page {
	background-color: #999;
}
.header {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background-color: #fff;
	.button {
		width: 180rpx;
		height: 60rpx;
		.btn {
			color: #fff;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 26rpx;
			background-color: #6da7ff;
			text-align: center;
		}
	}
}
.tags {
	background-color: #fff;
	/deep/.u-tabs__wrapper__nav__item {
		padding: 0 80rpx;
	}
}
.content {
	padding: 20rpx;
	.box {
		border-radius: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		.top {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #f5f5f5;
			padding-bottom: 20rpx;
			.box-one {
			}
			.box-two {
				margin: 0 10rpx;
				position: relative;
				.tuijian {
					color: #fff;
					background-color: #016eff;
					height: 40rpx;
					width: 80rpx;
					font-size: 24rpx;
					text-align: center;
					line-height: 40rpx;
					border-radius: 0 20rpx 20rpx 0;
					position: absolute;

					top: 20rpx;
					left: 0;
				}
				.xiajia {
					width: 150rpx;
					height: 150rpx;
					color: #fff;
					position: absolute;
					left: 0;
					top: 0;
					text-align: center;
					line-height: 150rpx;
				}
			}

			.box-three {
				width: 500rpx;
				height: 150rpx;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.one {
					font-weight: 700;
				}
				.two {
					color: #333;
					font-size: 26rpx;
				}
				.three {
					color: #333;
					font-size: 26rpx;
				}
			}
		}
		.bottom {
			font-size: 26rpx;
			padding: 20rpx 0 0 0;
			color: #999;
		}
	}
}
.footer {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx;
	position: fixed;
	bottom: 0;
	background-color: #fff;
	width: 100%;
	.left {
		background-color: #016eff;
		width: 600rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 40rpx;
		color: #fff;
	}
}
.slot-content {
}
::v-deep .u-modal__content {
	flex-direction: inherit !important;
}
</style>
